<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="header.jsp" flush="true" />
<title>Bid-Market</title>
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-md-offset-3 col-md-6 well">
				<h2>Sign Up</h2>
				<form class="form-horizontal" method="POST" action="/BidMarket/RegisterController">
					<div class="form-group">
						<label for="inputEmail" class="col-sm-4 control-label">E-mail:</label>
						<div class="col-sm-6">
							<input type="email" class="form-control" id="inputEmail"
								name="inputEmail" style="width: 80%" maxlength="30" required>
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-4 control-label">Password:</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="inputPassword1"
								name="inputPassword1" style="width: 80%" maxlength="30" required>
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-4 control-label">Confirm
							Password:</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="inputPassword2"
								name="inputPassword2" style="width: 80%" maxlength="30" required>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="submit" class="btn btn-primary" id="registerButton"
								disabled>Sign Up</button>
						</div>
					</div>
					<br> <font color="blue" id="errorMsg"></font>
				</form>
			</div>
		</div>
	</div>
	<script>
		var passwordSame;
		$("#inputPassword2").keyup(
				function(event) {
					if ($("#inputPassword1").val() != $("#inputPassword2")
							.val()) {
						$("#inputPassword2").css("background-color", "pink");
						$('#registerButton').attr("disabled", true);
						passwordSame = false;
					} else {
						$("#inputPassword2").css("background-color",
								"lightgreen");
						passwordSame = true;
						if ($("#inputEmail").val().length != 0
								&& $("#inputPassword1").val().length != 0) {
							$('#registerButton').attr("disabled", false);
						}
					}
				});

		$("#inputPassword1").keyup(
				function(event) {
					if ($("#inputPassword1").val() != $("#inputPassword2")
							.val()) {
						$("#inputPassword2").css("background-color", "pink");
						$('#registerButton').attr("disabled", true);
						passwordSame = false;
					} else {
						$("#inputPassword2").css("background-color",
								"lightgreen");
						passwordSame = true;
						if ($("#inputEmail").val().length != 0
								&& $("#inputPassword1").val().length != 0) {
							$('#registerButton').attr("disabled", false);
						}
					}
				});


		$("#inputEmail").keyup(
				function(event) {
					if (passwordSame
							&& $("#inputEmail").val().length != 0
							&& $("#inputPassword1").val().length != 0) {
						$('#registerButton').attr("disabled", false);
					} else {
						$('#registerButton').attr("disabled", true);
					}
				});
						$("#registerButton")
				.on(
						'click',
						function(event) {
							if (!passwordSame) {
								alert("Passwords are not the same!");
							}
						});
	</script>

</body>
</html>